<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .menu {
            width: 100%;
            display: flex;
            position: fixed;
            left: 0;
            bottom: 0;
        }

        .item {
            flex: 1;
            background-color: black;
            color: cadetblue;
            text-align: center;
            line-height: 40px;
        }

        .menu .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="menu" v-show="flag">
            <div class="item" v-for="item in list" :class="{active:item.id == activeIndex}" >
               <a :href="'#'+item.path">{{item.msg}}</a> </div>
        </div>
        <component :is="com"></component>
    </div>
</body>
<script>
    let com1 = {
        template: "<div>组件一的内容</div>",
        beforeCreate(){
            console.log("a")
        },
        created(){
            console.log("b")
        },
        beforeMount(){
            console.log("c");
        },
        mounted(){
            console.log("d")
        },
        beforeUpdate(){
            console.log("e");
        },
        updated(){
            console.log("f");
        },
        beforeDestroy(){
            console.log("g");
        },
        destroyed(){
            console.log("h")
        }
    }
    let com2 = {
        template: "<div>组件二的内容</div>",
        beforeCreate(){
            console.log("a2")
        },
        created(){
            console.log("b2")
        },
        beforeMount(){
            console.log("c2");
        },
        mounted(){
            console.log("d2")
        },
        beforeUpdate(){
            console.log("e2");
        },
        updated(){
            console.log("f2");
        },
        beforeDestroy(){
            console.log("g2");
        },
        destroyed(){
            console.log("h2")
        }
    }
    let com3 = {
        template: "<div>组件三的内容</div>"
    }
    let com4 = {
        template: "<div>404</div>"
    }
    new Vue({
        el: "#app",
        data: {
            activeIndex: 1,
            flag:true,
            com: "com1",
            list: [{ id: 1, msg: '菜单一', path: "/com1", com: "com1" }, { id: 2, msg: '菜单二', path: "/com2", com: "com2" }, { id: 3, msg: '菜单三', path: "/com3", com: "com3" }]
        },
        components: {
            com1,
            com2,
            com3,
            com4
        },
        beforeCreate(){
            console.log("1")
        },
        created(){
            console.log("2")
        },
        beforeMount(){
            console.log("3");
        },
        methods: {
            change(item) {
                this.activeIndex = item.id;
                this.com = item.com;
            }
        },
        beforeUpdate(){
            console.log("5");
        },
        updated(){
            console.log("6");
        },
        beforeDestroy(){
            console.log("7");
        },
        destroyed(){
            console.log("8")
        },
        mounted() {//同步页面结构加载完成
            console.log("4")

            window.onhashchange = () => {//箭头函数  this指向上下文关系对象（vue实例）
                let hash = window.location.hash;//获取hash值
                //更加hash指 找到组件信息
                // console.log(hash);
                let  path = hash.substring(1);//去除#

                let infoList = this.list.filter(item=>item.path==path);//集合
                if(infoList.length){
                    let  info = infoList[0];//找到以后 调用事件
                    this.change(info);
                    this.flag = true;
                }else{
                    this.com = "com4";
                    this.flag = false;
                }


            }



        }

    })

</script>

</html>